<template>
  <div id="echarts3"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts3()
  },
  created() {},
  methods: {
    showEcharts3() {
      let myChart = this.$echarts.init(document.getElementById('echarts3'))
      let data = this.data
      let array = [];
      data.map((v)=> {
        let obj = {}
        obj.name = v.name
        array.push(obj) 
      })
      let everyDepartment = {
        stages: array,
        scores: data.map((v)=> v.value),
      }
      function contains(arr, obj) {
        var i = arr.length
        while (i--) {
          if (arr[i].name === obj) {
            return i
          }
        }
        return false
      }
      let option = {
        color: ['#35F3FF'],
        radar: {
          center: ['50%', '50%'],
          radius: '62%',
          triggerEvent: true,
          splitNumber: 4,
          name: {
            rich: {
              a: {
                fontSize: 12,
                color: '#eee',
                lineHeight: '30',
              },
              // 数值
              b: {
                color: '#00E4FF',
                fontSize: 12,
                fontWeight: 700,
                // padding: [0, 0, 0, 10],
                // align: 'right',
              },
              // c: {
              //   color: '#fff',
              //   fontSize: 16,
              // },
              // d: {
              //   color: '#00E4FF',
              //   fontSize: 12,
              //   padding: [0, 15, 0, 0],
              //   align: 'right',
              // },
              triggerEvent: true,
            },
            formatter: (a, index) => {
              let values = a // a.length > 6 ? a.slice(0, 6) + '...' : a
              let i = contains(everyDepartment.stages, a) // 处理对应要显示的样式
              // return `{a| ${values}：}\n{b| ${everyDepartment.scores[i]}}`
              return `{a| ${values}}\n{b| ${everyDepartment.scores[i]}}`
            },
          },
          nameGap: '2',
          indicator: everyDepartment.stages,
          splitArea: {
            show: false,
          },
          // axisLabel:{//展示刻度
          //     show: true
          // },
          axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
              color: '#0A5BDE',
              width: 2,
            },
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: '#0A5BDE',
            },
          },
        },

        series: [
          {
            type: 'radar',
            symbolSize: 6, // 圆点
            data: [
              {
                value: everyDepartment.scores,
                name: '',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#35F3FF',
                    },
                    shadowColor: '#35F3FF',
                    shadowBlur: 20,
                  },
                },
                areaStyle: {
                  normal: {
                    color: 'rgba(53, 243, 255, 0.38)',
                  },
                },
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
